<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
        content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
    <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>
    <!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    <!--banner-->

    <style type="text/css">
        body, .page {
            background: #fff;
        }
        /*css 的样式都放在这里*/
        .buttons-tab {
            /* position: sticky;
            top: 0; */
            position: fixed;
            width: 100%;
            z-index: 99;
        }

        .list-block {
            margin-top: 2rem 0 !important;
        }

        .item-subtitle {
            font-size: 0.6rem !important;
            color: #999;
        }
    </style>


</head>

<body>
    <div class="page">
        <div class="content" data-type="">
            <div class="buttons-tab fixed-tab">
                <a href="#tab0" class="tab-link active button">全部</a>
            </div>

            <div class="tabs">
                <div id="tab0" class="tab infinite-scroll active">
                    <div class="list-block media-list">
                        <ul class="list-container">
                        </ul>
                    </div>
                    <div class="infinite-scroll-preloader">
                        <div class="preloader"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
    <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
    <!-- 这一行代码是为了 避免js冲突 -->
    <script type="text/javascript">var $$ = jQuery.noConflict();</script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
        charset='utf-8'></script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
        charset='utf-8'></script>


    <script type="text/javascript">

        $$('.tabs').on('click', '.item-content', function() {
            console.log($$(this).data('id'))
            console.log($$(this).find('.item-title').text())
            goInfo($$(this).data('id'), $$(this).find('.item-title').text());
        })

        function goInfo(id, title) {
            native_goto('local/webview?url=http://www.33xiaomifeng.com/api/v1/showarticle/' + id + '&title=' + title);
        }

        $(function () {
            net_request('get', 'api/v1/dicts?type=news', {}, newsTypeSuccessCallBack, newsTypeErrorCallBack);

            net_request('get', 'api/v1/articles', {
                offset: 0,
                limit: 20,
                postion: "news",
                type: ""
            }, newsSuccessCallBack, newsErrorCallBack);
           
        });



        function newsSuccessCallBack(data) {
            // console.log(data)
            if (data.success && isNotNull(data.data)) {
                let list = data.data;
                let html = '';
                for (val of list) {
                    html += `<li class="item-content" data-id="${val.id}">
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">${val.title}</div>
                                      </div>
                                      <div class="item-subtitle">${val.created_at}</div>
                                </div>
                            </li>`
                }
                $$('.list-container').eq(0).html(html);
                if (list.length < 20) {
                    $('.infinite-scroll-preloader').eq(0).hide();
                }
            } else {
                $('.infinite-scroll-preloader').eq(0).hide();
            }
            initScroll();

        }

        function newsErrorCallBack(err) {
            console.log(err)
            initScroll();
        }

        function newsTypeSuccessCallBack(data) {
            if (data.success && isNotNull(data.data)) {
                let list = data.data;
                for (let i = 0; i < list.length; i++) {
                    $$('.buttons-tab.fixed-tab').append(`<a href="#tab${i + 1}" data-index="${i + 1}" data-key="${list[i].key}" class="tab-link button">${list[i].value}</a>`);
                    $$('.tabs').append(`<div id="tab${i + 1}" class="tab infinite-scroll">
                        <div class="list-block media-list">
                            <ul class="list-container"></ul>
                        </div>
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>`);
                    net_request('get', 'api/v1/articles', {
                        offset: 0,
                        limit: 20,
                        postion: "news",
                        type: list[i].key
                    }, function (res) {
                        if (res.success && isNotNull(res.data)) {
                            let list = res.data;
                            let html = ''
                            for (val of list) {
                                html += `<li class="item-content" data-id="${val.id}">
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">${val.title}</div>
                                      </div>
                                      <div class="item-subtitle">${val.created_at}</div>
                                </div>
                            </li>`
                            }
                            $$('.list-container').eq(i + 1).html(html);
                            if (list.length < 20) {
                                $('.infinite-scroll-preloader').eq(i + 1).hide();
                            }
                        } else {
                            $('.infinite-scroll-preloader').eq(i + 1).hide();
                        }
                    }, function (err) {
                        console.log(err)
                    });
                }
            }
        }

        function newsTypeErrorCallBack(err) {
            console.log(err)
        }

        function initScroll() {
            $(document).on("pageInit", function (e, id, page) {
                //多个标签页下的无限滚动
                var loading = false;
                // 每次加载添加多少条目
                // 最多可加载的条目
                $(page).on('infinite', function () {
                    // 如果正在加载，则退出
                    if (loading) return;
                    // 设置flag
                    loading = true;
                    var tabIndex = $(this).find('.infinite-scroll.active').index();
                    lastIndex = $('.list-container').eq(tabIndex).find('li').length;
                    console.log($(this).find('.infinite-scroll.active'))
                    if (lastIndex < 20) {
                        return false;
                    }
                    net_request('get', 'api/v1/articles', {
                        offset: lastIndex,
                        limit: 20,
                        postion: "news",
                        type: $(this).find('.tab-link.active').data('key')
                    }, function (res) {
                        loading = false;
                        if (res.success && isNotNull(res.data)) {
                            let list = res.data;
                            let html = ''
                            for (val of list) {
                                html += `<li class="item-content" data-id="${val.id}">
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">${val.title}</div>
                                      </div>
                                      <div class="item-subtitle">${val.created_at}</div>
                                </div>
                            </li>`
                            }
                            $$('.list-container').eq(tabIndex).append(html);
                            if (list.length < 20) {
                                $('.infinite-scroll-preloader').eq(tabIndex).hide();
                            }
                        } else {
                            $('.infinite-scroll-preloader').eq(tabIndex).hide();
                        }
                        $.refreshScroller();
                    }, function (err) {
                        console.log(err)
                    });
                });
            });
            $.init();
        }
    </script>
</body>

</html>